<template>
	<view class="content">
		<!-- 商品列表 -->
		<view class="container">
			<view class="item" v-for="(item, index) in goodsList" :key="index" @click="contaDetail()">
				<!--  @click="toggleDropdown" -->
				<view class="image-wrapper">
					<image class="item-image" :src="item.detailImages" mode="widthFix" />
					<!-- 添加角标 -->
					<view v-if="item.badgeText" class="badge">
						<!-- <text class="badge-text">{{ item.badgeText }}</text> -->
					</view>
				</view>
				<view class="item-content">
					<view class="item-title">{{ item.name }}</view>
					<!-- <view class="item-price">参考价：{{ item.price }}</view> -->
					<view class="item-price">参考价：{{ item.moneyPrice }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { boxList, boxDetail } from "@/api/blind.js"
export default {
	data() {
		return {
			title: 'Hello',
			goodsList: [],
		}
	},
	onLoad() {

	},
	mounted() {
		boxList({ boxId: 3 }).then(res => {
			this.goodsList = res.data.list;
			console.log(res.data.list);
		}).catch(err => {
			console.log(err);
		})
	},
	methods: {
		handleImageClick(index) {
			// 该函数通过.map()方法遍历this.image数组中的每个元素，将每个元素的src属性值提取出来，生成一个新的数组urls
			const urls = this.image.map(item => item.src);
			// console.log(urls);
			// 点击图片之后全屏预览
			uni.previewImage({
				urls: urls,
				current: index
			})
			// 图片放大停留2秒之后跳转页面。使用Promise对象来实现异步操作
			new Promise((resolve, reject) => {
				setTimeout(resolve, 2000);
			}).then(() => {
				this.handleRotate()
			})
		},
		handleRotate() {
			uni.navigateTo({
				url: "pages/index/details/details"
			})
		},
		contaDetail() {
			// const selectedGoods = this.goodsList[index];
			// console.log(selectedGoods.id);
			
			boxDetail({  boxId: 2}).then(res => {
				this.goodsList = res.data.list;
				console.log(res.data.list);
			});
		}
		// contaDetail(index) {
		// 	const selectedGoods = this.goodsList[index];

		// 	// 添加安全性检查，确保selectedGoods存在且具有'id'属性
		// 	if (selectedGoods && selectedGoods.hasOwnProperty('id')) {
		// 		console.log(selectedGoods.id);

		// 		boxDetail({ boxId: 3, index: selectedGoods.id }).then(res => {
		// 			this.goodsList = res.data.list;
		// 			console.log(res.data.list);
		// 		}).catch(err => {
		// 			console.error('Error fetching box details:', err);
		// 		});
		// 	} else {
		// 		console.error('无效的商品索引或商品缺少id属性：', index, selectedGoods);
		// 	}
		// }

	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #151515;
}

// 商品列表
.container {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	// border: 1rpx solid white;
}

.item {
	width: 40%;
	margin-bottom: 60rpx;
	padding: 20rpx;
	border-radius: 10rpx;
	background-color: #121218;
	border: 3rpx solid #f1d3a8;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.image-wrapper {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	/* 保持宽高比 */
	overflow: hidden;
}

.item-image {
	width: 100%;
	height: 100%;
}

.item-content {
	margin-top: 20rpx;
}

.item-title {
	color: #fff;
	font-size: 32rpx;
	line-height: 42rpx;
	margin-bottom: 10rpx;
}

.item-price {
	color: #f1d3a8;
	font-size: 32rpx;
	line-height: 42rpx;
}

/* 针对奇数项（右侧）进行样式调整 */
.item:nth-child(odd) {
	margin-right: 2%;
}
</style>